<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">达飞加注统计</div>

      <!-- <div class="loadExcel" style="position: absolute; top: 1vh; left: 90px">
        <div class="button" @click="exportToExcel('allTable', '汇总表')">
          导出
        </div>
      </div> -->
      <div class="loadAndSearch">
        <div class="loadExcel">
          <div class="button" @click="exportToExcel('allTable')">导出</div>
        </div>
      </div>
      <div class="table" id="allTable" :style="{ width: tableWidth }">
        <el-table
          empty-text="暂无数据"
          :data="tableData5"
          style="width: 100%; margin-top: 5px"
          border
          id="table"
          max-height="27vh"
          class="custom-table-padding"
          :span-method="objectSpanMethod"
        >
          <el-table-column label="历史总统计表" align="center">
            <el-table-column label="历史统计表" align="center" fixed="left">
              <el-table-column
                align="center"
                width="100"
                prop="first"
              ></el-table-column>
              <el-table-column
                align="center"
                width="70"
                prop="sencod"
              ></el-table-column>
              <el-table-column
                align="center"
                width="100"
                prop="total"
              ></el-table-column>
            </el-table-column>
            <el-table-column
              v-for="(item, index) in yearList2"
              :label="item + '年'"
              align="center"
              ><el-table-column
                :prop="yearList2[index]"
                align="center"
                min-width="220"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
        <!-- 海港未来 -->
        <el-table
          :data="tableData3"
          style="width: 100%; margin-top: 5px"
          border
          empty-text="暂无数据"
          id="table1"
          max-height="27vh"
          class="custom-table-padding"
          :span-method="objectSpanMethod"
        >
          <el-table-column label="海港未来" align="center">
            <el-table-column
              label="LNG装载加注汇总表"
              align="center"
              fixed="left"
            >
              <el-table-column
                align="center"
                width="100"
                prop="first"
              ></el-table-column>
              <el-table-column
                align="center"
                width="70"
                prop="sencod"
              ></el-table-column>
              <el-table-column
                align="center"
                width="100"
                prop="total"
              ></el-table-column>
            </el-table-column>
            <el-table-column
              v-for="(item, index) in yearList"
              :label="item + '年'"
              min-width="220"
              align="center"
            >
              <el-table-column
                :prop="yearList[index]"
                min-width="220"
                align="center"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
        <el-table
          :data="tableData4"
          style="width: 100%; margin-top: 5px"
          border
          empty-text="暂无数据"
          id="table2"
          max-height="27vh"
          class="custom-table-padding"
          :span-method="objectSpanMethod"
        >
          <el-table-column label="淮河能源启航" align="center">
            <el-table-column
              label="LNG装载加注汇总表"
              align="center"
              fixed="left"
            >
              <el-table-column
                align="center"
                width="100"
                prop="first"
              ></el-table-column>
              <el-table-column
                align="center"
                width="70"
                prop="sencod"
              ></el-table-column>
              <el-table-column
                align="center"
                width="100"
                prop="total"
              ></el-table-column>
            </el-table-column>
            <el-table-column
              v-for="(item, index) in yearList1"
              :label="item + '年'"
              min-width="220"
              align="center"
            >
              <el-table-column
                :prop="yearList1[index]"
                min-width="220"
                align="center"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
        <!-- 内容过多，会出现滚动条 -->
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import { read, write } from "xlsx-style-medalsoft";
import $ from "jquery";
export default {
  name: "",
  data() {
    return {
      multi: [],

      tableData: [],
      tableWidth: null,

      yearList: [],
      yearList1: [],
      yearList2: [],
      allList: [],
      tableData: [
        {
          total: {
            total1: 1,
            total2: 33,
            total3: 13,
            tota14: 12,
            total5: 14,
            total6: 132,
            total7: 135,
            total8: 143,
            total9: 123,
          },
          yearList: [],
        },
      ],
      tableData1: [
        {
          total: {
            total10: 1,
            total11: 33,
            total12: 13,
            tota113: 12,
            total14: 14,
            total15: 132,
            total16: 135,
            total17: 143,
            total18: 123,
          },
          yearList: [],
        },
      ],
      tableData2: [
        {
          total: {
            total10: 1,
            total11: 33,
            total12: 13,
            tota113: 12,
            total14: 14,
            total15: 132,
            total16: 135,
            total17: 143,
            total18: 123,
          },
          yearList: [],
        },
      ],
      Hcontent: [],
      Wcontent: [],
      lasetDate: "2023/12/31",
      file: null,
      fileName: "",
      jtData: null,
      token: "",
      allName: [],
      allValue: [],
      newValue: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    exportToExcel(elementId, fileName) {
      let time = this.getFileName();
      const table = document.getElementById(elementId);
      const wb = XLSX.utils.table_to_book(table);


      let wbs = wb.Sheets.Sheet1;

      let arr = [];
      Object.keys(wbs).forEach((key) => {

        arr.push(key);
      });


      let str = wbs["!ref"];
      let parts = str.split(":"); // 分割字符串
      let number = parts[1]
        .split("")
        .filter((char) => !isNaN(char))
        .join(""); // 过滤出数字并连接


      number = parseInt(number);

      for (let i = 1; i < number + 1; i++) {

        if (arr.indexOf("A" + i) != -1) {

        } else {
          wbs["A" + i] = { t: "s", v: "" };
        }
        if (i >= 2) {
          if (arr.indexOf("C" + i) != -1) {
          } else {
            wbs["C" + i] = { t: "s", v: "" };
          }
          if (arr.indexOf("B" + i) != -1) {
          } else {
            wbs["B" + i] = { t: "s", v: "" };
          }
        }
      }

      wbs["!cols"] = [
        { wch: 15 }, // ID列宽大约为10个字符宽度
        { wch: 10 }, // Name列宽大约为20个字符宽度
        { wch: 10 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 },
        { wch: 30 }, // Email列宽大约为30个字符宽度
      ];

      for (const key in wbs) {
        if (key.indexOf("!") === -1) {
          wbs[key].s = {
            font: {
              sz: 11, // 字体大小
              bold: false, // 加粗
              name: "宋体", // 字体
              color: {
                rgb: "000000", // 十六进制，不带#
              },
            },
            alignment: {
              // 文字居中
              horizontal: "center",
              vertical: "center",
              wrapText: true, // 文本自动换行
            },
            border: {
              // 设置边框
              top: { style: "thin" },
              bottom: { style: "thin" },
              left: { style: "thin" },
              right: { style: "thin" },
            },
          };
        }
      }
      let table_write = write(wb, {
        bookType: "xlsx",
        type: "buffer",
      });

      FileSaver.saveAs(
        new Blob([table_write], { type: "application/octet-stream" }),
        `历史作业统计-${time}.xlsx`
      );
    },
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();
      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },

    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          if (item.first === arr[index - 1].first) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        if (rowIndex == 1) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else if (rowIndex == 2) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        } else if (rowIndex == 3) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }

        if (rowIndex == 5) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else if (rowIndex == 6) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        } else if (rowIndex == 7) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    forMatterNum(a) {
      if (parseFloat(a)) {
        return parseFloat(a);
      } else {
        return 0;
      }
    },
    formDataDate() {
      let data = new Date(this.lasetDate);
      let year = data.getFullYear();
      let month = data.getMonth() + 1;
      let day = data.getDate();
      return `${year}/${month}/${day}`;
    },
    click(a) {

    },
    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },
    // 获取列表数据
    async getRenderList() {
      await service({
        methods: "get",
        url: "statistical-table/dafei-summary",
      })
        .then((e) => {
          e.data.forEach((item) => {
            if (item.type == 1) {
              this.Hcontent.push(item);
            } else if (item.type == 2) {
              this.Wcontent.push(item);
            }
          });
          for (let i = 0; i < this.Hcontent.length; i++) {
            for (let j = 0; j < this.Wcontent.length; j++) {
              if (this.Hcontent[i].year == this.Wcontent[j].year) {

                this.yearList2.push(this.Hcontent[i].year);

                this.allList.push({
                  loadShipNum:
                    this.forMatterNum(this.Hcontent[i].loadShipNum) +
                    this.forMatterNum(this.Wcontent[j].loadShipNum),

                  loadNum:
                    this.forMatterNum(this.Hcontent[i].loadNum) +
                    this.forMatterNum(this.Wcontent[j].loadNum),
                  // loadWeight:
                  loadWeight:
                    this.forMatterNum(this.Hcontent[i].loadWeight) +
                    this.forMatterNum(this.Wcontent[j].loadWeight),
                  load_mmbtu:
                    this.forMatterNum(this.Hcontent[i].load_mmbtu) +
                    this.forMatterNum(this.Wcontent[j].load_mmbtu),
                  // fillShipNum:
                  fillShipNum:
                    this.forMatterNum(this.Hcontent[i].fillShipNum) +
                    this.forMatterNum(this.Wcontent[j].fillShipNum),

                  fillNum:
                    this.forMatterNum(this.Hcontent[i].fillNum) +
                    this.forMatterNum(this.Wcontent[j].fillNum),
                  fillWeight:
                    this.forMatterNum(this.Hcontent[i].fillWeight) +
                    this.forMatterNum(this.Wcontent[j].fillWeight),
                  fill_mmbtu:
                    this.forMatterNum(this.Hcontent[i].fill_mmbtu) +
                    this.forMatterNum(this.Wcontent[j].fill_mmbtu),
                  fillHomeworkNum:
                    this.forMatterNum(this.Hcontent[i].fillHomeworkNum) +
                    this.forMatterNum(this.Wcontent[j].fillHomeworkNum),
                });
              }
            }
          }
          let total1 = 0,
            total2 = 0,
            total3 = 0,
            total4 = 0,
            total5 = 0,
            total6 = 0,
            total7 = 0,
            total8 = 0,
            total9 = 0,
            total10 = 0,
            total11 = 0,
            total12 = 0,
            total13 = 0,
            total14 = 0,
            total15 = 0,
            total16 = 0,
            total17 = 0,
            total18 = 0,
            total19 = 0,
            total20 = 0,
            total21 = 0,
            total22 = 0,
            total23 = 0,
            total24 = 0,
            total25 = 0,
            total26 = 0,
            total27 = 0;

          //  历史总计数据处理
          this.allList.forEach((item) => {
            if (parseFloat(item.loadShipNum)) {
              total19 += parseFloat(item.loadShipNum);
            }
            if (parseFloat(item.loadNum)) {
              total20 += parseFloat(item.loadNum);
            }
            if (parseFloat(item.loadWeight)) {
              total21 += parseFloat(item.loadWeight);
            }
            // total3 = total3.toFixed(2);
            if (parseFloat(item.load_mmbtu)) {
              total22 += parseFloat(item.load_mmbtu);
            }
            // total4 = total4.toFixed(2);
            if (parseFloat(item.fillShipNum)) {
              total23 += parseFloat(item.fillShipNum);
            }

            if (parseFloat(item.fillNum)) {
              total24 += parseFloat(item.fillNum);
            }

            if (parseFloat(item.fillWeight)) {
              total25 += parseFloat(item.fillWeight);
            }
            // total7 = total7.toFixed(2);
            if (parseFloat(item.fill_mmbtu)) {
              total26 += parseFloat(item.fill_mmbtu);
            }
            // total8 = total8.toFixed(2);
            if (parseFloat(item.fillHomeworkNum)) {
              total27 += parseFloat(item.fillHomeworkNum);
            }
          });
          this.tableData2[0].total = {
            total1: total19,
            total2: total20,
            total3: total21,
            total4: total22,
            total5: total23,
            total6: total24.toFixed(2),
            total7: total25,
            total8: total26,
            total9: total27,
          };

          this.tableData2[0].yearList = this.allList;
          // 海港未来数据处理
          this.Hcontent.forEach((item) => {
            this.yearList.push(item.year);
            if (parseFloat(item.loadShipNum)) {
              total1 += parseFloat(item.loadShipNum);
            } else {
              total1 += 0;
            }

            if (parseFloat(item.loadNum)) {
              total2 += parseFloat(item.loadNum);
            }
            if (parseFloat(item.loadWeight)) {
              total3 += parseFloat(item.loadWeight);
            }
            // total3 = total3.toFixed(2);
            if (parseFloat(item.load_mmbtu)) {
              total4 += parseFloat(item.load_mmbtu);
            }
            // total4 = total4.toFixed(2);
            if (parseFloat(item.fillShipNum)) {
              total5 += parseFloat(item.fillShipNum);
            }

            if (parseFloat(item.fillNum)) {
              total6 += parseFloat(item.fillNum);
            }

            if (parseFloat(item.fillWeight)) {
              total7 += parseFloat(item.fillWeight);
            }
            // total7 = total7.toFixed(2);
            if (parseFloat(item.fill_mmbtu)) {
              total8 += parseFloat(item.fill_mmbtu);
            }
            // total8 = total8.toFixed(2);
            if (parseFloat(item.fillHomeworkNum)) {
              total9 += parseFloat(item.fillHomeworkNum);
            }
          });
          this.tableData[0].yearList = this.Hcontent;
          // 处理合计
          this.tableData[0].total = {
            total1: total1,
            total2: total2,
            total3: total3,
            total4: total4,
            total5: total5,
            total6: total6.toFixed(2),
            total7: total7,
            total8: total8,
            total9: total9,
          };
          // 淮河新能源启航数据处理
          this.Wcontent.forEach((item) => {
            this.yearList1.push(item.year);
            if (parseFloat(item.loadShipNum)) {
              total10 += parseFloat(item.loadShipNum);
            } else {
              total10 += 0;
            }

            if (parseFloat(item.loadNum)) {
              total11 += parseFloat(item.loadNum);
            }
            if (parseFloat(item.loadWeight)) {
              total12 += parseFloat(item.loadWeight);
            }
            // total3 = total3.toFixed(2);
            if (parseFloat(item.load_mmbtu)) {
              total13 += parseFloat(item.load_mmbtu);
            }
            // total4 = total4.toFixed(2);
            if (parseFloat(item.fillShipNum)) {
              total14 += parseFloat(item.fillShipNum);
            }

            if (parseFloat(item.fillNum)) {
              total15 += parseFloat(item.fillNum);
            }

            if (parseFloat(item.fillWeight)) {
              total16 += parseFloat(item.fillWeight);
            }
            // total7 = total7.toFixed(2);
            if (parseFloat(item.fill_mmbtu)) {
              total17 += parseFloat(item.fill_mmbtu);
            }
            // total8 = total8.toFixed(2);
            if (parseFloat(item.fillHomeworkNum)) {
              total18 += parseFloat(item.fillHomeworkNum);
            }
          });
          this.tableData1[0].total = {
            total1: total10,
            total2: total11,
            total3: total12,
            total4: total13,
            total5: total14,
            total6: total15.toFixed(2),
            total7: total16,
            total8: total17,
            total9: total18,
          };
          this.tableData1[0].yearList = this.Wcontent;


          for (let i = 0; i < this.tableData1.length; i++) {

            let arr = [
              {
                first: "装载艘次",
                sencod: "艘次",
                total: "",
              },
              {
                first: "装载量",
                sencod: "m³",
                total: "",
              },
              {
                first: "装载量",
                sencod: "t",
                total: "",
              },
              {
                first: "装载量",
                sencod: "MMBtu",
                total: "",
              },
              {
                first: "加注艘次",
                sencod: "艘次",
                total: "",
              },
              {
                first: "加注量",
                sencod: "m³",
                total: "",
              },
              {
                first: "加注量",
                sencod: "t",
                total: "",
              },
              {
                first: "加注量",
                sencod: "MMBtu",
                total: "",
              },
              {
                first: "同步作业箱量",
                sencod: "TEU",
                total: "",
              },
            ];

            for (let j = 0; j < this.yearList1.length; j++) {
             
              arr[0][this.yearList1[j]] =
                this.tableData1[i].yearList[j].loadShipNum;
              arr[0].total = this.tableData1[i].total.total1;

              arr[1][this.yearList1[j]] =
                this.tableData1[i].yearList[j].loadNum;
              arr[1].total = this.tableData1[i].total.total2.toFixed(2);

              arr[2][this.yearList1[j]] =
                this.tableData1[i].yearList[j].loadWeight;
              arr[2].total = this.tableData1[i].total.total3;

              arr[3][this.yearList1[j]] =
                this.tableData1[i].yearList[j].load_mmbtu;
              arr[3].total = this.tableData1[i].total.total4;

              arr[4][this.yearList1[j]] =
                this.tableData1[i].yearList[j].fillShipNum;
              arr[4].total = this.tableData1[i].total.total5;

              arr[5][this.yearList1[j]] =
                this.tableData1[i].yearList[j].fillNum;
              arr[5].total = this.tableData1[i].total.total6;

              arr[6][this.yearList1[j]] =
                this.tableData1[i].yearList[j].fillWeight;
              arr[6].total = this.tableData1[i].total.total7;

              arr[7][this.yearList1[j]] =
                this.tableData1[i].yearList[j].fill_mmbtu;
              arr[7].total = this.tableData1[i].total.total8;
              arr[8][this.yearList1[j]] =
                this.tableData1[i].yearList[j].fillHomeworkNum;
              arr[8].total = this.tableData1[i].total.total9;
            }
            this.tableData4.push(...arr);
          }
          for (let i = 0; i < this.tableData2.length; i++) {

            let arr = [
              {
                first: "装载艘次",
                sencod: "艘次",
                total: "",
              },
              {
                first: "装载量",
                sencod: "m³",
                total: "",
              },
              {
                first: "装载量",
                sencod: "t",
                total: "",
              },
              {
                first: "装载量",
                sencod: "MMBtu",
                total: "",
              },
              {
                first: "加注艘次",
                sencod: "艘次",
                total: "",
              },
              {
                first: "加注量",
                sencod: "m³",
                total: "",
              },
              {
                first: "加注量",
                sencod: "t",
                total: "",
              },
              {
                first: "加注量",
                sencod: "MMBtu",
                total: "",
              },
              {
                first: "同步作业箱量",
                sencod: "TEU",
                total: "",
              },
            ];

            for (let j = 0; j < this.yearList2.length; j++) {
              arr[0][this.yearList2[j]] =
                this.tableData2[i].yearList[j].loadShipNum;
              arr[0].total = this.tableData2[i].total.total1;

              arr[1][this.yearList2[j]] =
                this.tableData2[i].yearList[j].loadNum;
              arr[1].total = this.tableData2[i].total.total2.toFixed(2);

              arr[2][this.yearList2[j]] =
                this.tableData2[i].yearList[j].loadWeight;
              arr[2].total = this.tableData2[i].total.total3;

              arr[3][this.yearList2[j]] =
                this.tableData2[i].yearList[j].load_mmbtu;
              arr[3].total = this.tableData2[i].total.total4;

              arr[4][this.yearList2[j]] =
                this.tableData2[i].yearList[j].fillShipNum;
              arr[4].total = this.tableData2[i].total.total5;

              arr[5][this.yearList2[j]] =
                this.tableData2[i].yearList[j].fillNum;
              arr[5].total = this.tableData2[i].total.total6;

              arr[6][this.yearList2[j]] =
                this.tableData2[i].yearList[j].fillWeight;
              arr[6].total = this.tableData2[i].total.total7;

              arr[7][this.yearList2[j]] =
                this.tableData2[i].yearList[j].fill_mmbtu;
              arr[7].total = this.tableData2[i].total.total8;
              arr[8][this.yearList2[j]] =
                this.tableData2[i].yearList[j].fillHomeworkNum;
              arr[8].total = this.tableData2[i].total.total9;
            }
            this.tableData5.push(...arr);

          }
          for (let i = 0; i < this.tableData.length; i++) {
            let arr = [
              {
                first: "装载艘次",
                sencod: "艘次",
                total: "",
              },
              {
                first: "装载量",
                sencod: "m³",
                total: "",
              },
              {
                first: "装载量",
                sencod: "t",
                total: "",
              },
              {
                first: "装载量",
                sencod: "MMBtu",
                total: "",
              },
              {
                first: "加注艘次",
                sencod: "艘次",
                total: "",
              },
              {
                first: "加注量",
                sencod: "m³",
                total: "",
              },
              {
                first: "加注量",
                sencod: "t",
                total: "",
              },
              {
                first: "加注量",
                sencod: "MMBtu",
                total: "",
              },
              {
                first: "同步作业箱量",
                sencod: "TEU",
                total: "",
              },
            ];

            for (let j = 0; j < this.yearList.length; j++) {

              arr[0][this.yearList[j]] =
                this.tableData[i].yearList[j].loadShipNum;
              arr[0].total = this.tableData[i].total.total1;

              arr[1][this.yearList[j]] = this.tableData[i].yearList[j].loadNum;
              arr[1].total = this.tableData[i].total.total2.toFixed(2);

              arr[2][this.yearList[j]] =
                this.tableData[i].yearList[j].loadWeight;
              arr[2].total = this.tableData[i].total.total3;

              arr[3][this.yearList[j]] =
                this.tableData[i].yearList[j].load_mmbtu;
              arr[3].total = this.tableData[i].total.total4;

              arr[4][this.yearList[j]] =
                this.tableData[i].yearList[j].fillShipNum;
              arr[4].total = this.tableData[i].total.total5;

              arr[5][this.yearList[j]] = this.tableData[i].yearList[j].fillNum;
              arr[5].total = this.tableData[i].total.total6;

              arr[6][this.yearList[j]] =
                this.tableData[i].yearList[j].fillWeight;
              arr[6].total = this.tableData[i].total.total7;

              arr[7][this.yearList[j]] =
                this.tableData[i].yearList[j].fill_mmbtu;
              arr[7].total = this.tableData[i].total.total8;
              arr[8][this.yearList[j]] =
                this.tableData[i].yearList[j].fillHomeworkNum;
              arr[8].total = this.tableData[i].total.total9;
            }
            this.tableData3.push(...arr);

          }
        })
        .catch((err) => {});
    },

    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作

      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
  },

  created() {
    this.sendMessage();
    this.getRenderList();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    let that = this;
    // this.getRenderList();

    // this.sendMessage();
    setTimeout(function () {
      $(".is-group").eq(0).children().eq(2).remove();
      $(".is-group").eq(1).children().eq(2).remove();
      $(".is-group").eq(2).children().eq(2).remove();
    });
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.tableName {
  width: 100%;
  padding: 10px;
  font-size: 20px;
  font-weight: 600;
  color: black;
  text-align: center;
}
.tableContain {
  width: 100%;
  height: 180px;
  display: flex;
  .left {
    width: 40%;
    height: 180px;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #ebeef5;
    }
    .leftTop {
      width: 100%;
      height: 20px;
    }
    .leftSecond {
      width: 100%;
      height: 60px;
    }
    .leftThrid {
      width: 100%;
      height: 20px;
    }
    .leftFourth {
      width: 100%;
      height: 60px;
    }
    .leftLast {
      width: 100%;
      height: 20px;
    }
  }
  .center {
    width: 20%;
    div {
      width: 100%;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #ebeef5;
      border-left: 1px solid #ebeef5;
    }
  }
  .right {
    width: 40%;
    div {
      width: 100%;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #ebeef5;
      border-left: 1px solid #ebeef5;
    }
  }

  // .leftName {
  //   width: 40%;
  //   border-right: 1px solid #ebeef5;
  //   text-align: center;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  // }
  // .rightName {
  //   width: 60%;
  // }
}
.smallLine {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}

:deep(.el-table .el-table__cell) {
  padding: 0 !important;
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;

    .loadSecond {
      width: 280px;

      color: black;
      text-align: center;
      line-height: 33px;
      color: black;
      display: flex;
      align-items: center;

      margin-left: 10px;
      font-size: 15px;
      .topName {
        width: 90px;
        line-height: 33px;
        background: #67c23a;
        border-radius: 5px;
        a {
          display: block;
          width: 90px;
          line-height: 33px;
          text-decoration: none;
          color: white;
        }
      }
      .topName:nth-child(2) {
        background: #242121;
      }
    }
    .loadExcel {
      width: 300px;
      margin-top: 10px;
      margin-left: 10px;

      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .button {
        width: 60px;
        line-height: 20px;
        font-size: 18px;
        text-align: center;
      }
    }
  }
  // background: blue;
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}

@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      // margin-top: 10px !important;
    }
  }
  .closeAndSrue {
    width: 110px;
  }
}
</style>
